<template>
  <div class="service-config-wrapper">
    <a-descriptions :align="{ label: 'right' }" :column="1">
      <a-descriptions-item label="是否收取夜间服务费">
        <service-config-dict-value :val="info?.isNightServiceFee" dictProp="nightServiceFeeMap" />
      </a-descriptions-item>
      <template v-if="info?.isNightServiceFee == 1 && info?.nightServiceFeeList && info?.nightServiceFeeList.length > 0">
        <template v-for="(item, index) in info.nightServiceFeeList" :key="index">
          <a-descriptions-item :label="index == 0 ? '时间段' : ''">
            <template v-if="item.startTime && item.endTime">
              {{ `${item.startTime} - ${item.endTime}` }}
            </template>
            <template v-else-if="item.startTime || item.endTime">
              {{ `${getUnselect(item.startTime)} - ${getUnselect(item.endTime)}` }}
            </template>
            <template v-else>-</template>
            <div class="inline-block info-item">
              <span class="info-title">收费规则：</span>
              <span class="info-content">{{ `${getMoney(item.amount)} 元/次` }}</span>
            </div>
          </a-descriptions-item>
        </template>
      </template>
    </a-descriptions>
    <a-divider class="divider" />
    <a-descriptions :align="{ label: 'right' }" :column="1">
      <a-descriptions-item label="零散小时">{{ `满足 ${info.hourToDay || '-'} 小时，按一整天收费` }}</a-descriptions-item>
      <a-descriptions-item label="不满一整天">
        <service-config-dict-value :val="info?.hourAmountType" dictProp="hourAmountTypeMap" />
      </a-descriptions-item>
    </a-descriptions>
    <a-divider class="divider" />
    <a-descriptions :align="{ label: 'right' }" :column="1">
      <a-descriptions-item label="是否允许上门送/取车">
        <service-config-dict-value :val="info?.isOnsiteService" dictProp="onsiteServiceMap" />
      </a-descriptions-item>
      <template v-if="info.isOnsiteService == 1">
        <a-descriptions-item label="上门送取车是否收费">
          <service-config-dict-value :val="info?.isOnsiteServiceFee" dictProp="onsiteServiceFeeMap" />
        </a-descriptions-item>
        <template v-if="info?.isOnsiteServiceFee">
          <template v-for="(item, index) in info.onsiteServiceFeeList" :key="index">
            <a-descriptions-item :label="index == 0 ? '收费规则' : ''">
              <template v-if="index == 0">
                {{ `${getVal(item.endMileage)} 公里内，每次服务收费 ${getMoney(item.amount)} 元` }}
              </template>
              <template v-else>
                <template v-if="item.startMileage || item.endMileage">
                  {{
                    `${getUnselect(item.startMileage)} - ${getUnselect(item.endMileage)} 公里内，每次服务收费 ${getMoney(item.amount)} 元`
                  }}
                </template>
                <template v-else>
                  {{ `- 公里内，每次服务收费 ${getMoney(item.amount)} 元` }}
                </template>
              </template>
            </a-descriptions-item>
          </template>
          <a-descriptions-item label="是否限制上门送/取车最大距离">
            <service-config-dict-value :val="info?.isOnsiteMaxRadius" dictProp="onsiteMaxRadiusMap" />
          </a-descriptions-item>
          <a-descriptions-item>
            <template v-if="info.isOnsiteMaxRadius">
              {{ `${getVal(info.onsiteMaxRadius)} 公里外，不提供上门服务` }}
            </template>
            <template v-else>
              {{ `${getVal(info.onsiteMaxRadius)} 公里外，每次服务收 ${getMoney(info.overMaxRadiusAmount)} 元` }}
            </template>
          </a-descriptions-item>
        </template>
      </template>
    </a-descriptions>
    <a-divider class="divider" />
    <a-descriptions :align="{ label: 'right' }" :column="1">
      <a-descriptions-item label="是否允许同城异店还车">
        <service-config-dict-value :val="info?.isDiffSiteReturn" dictProp="diffSiteReturnMap" />
      </a-descriptions-item>
      <template v-if="info.isDiffSiteReturn == 1">
        <a-descriptions-item label="同城异店还车是否收费">
          <service-config-dict-value :val="info?.isDiffSiteFee" dictProp="diffSiteFeeMap" />
        </a-descriptions-item>
        <a-descriptions-item label="收费规则" v-if="info?.isDiffSiteFee == 1">{{
          `每次服务收费 ${getMoney(info.diffSiteFee)} 元`
        }}</a-descriptions-item>
        <a-descriptions-item label="还车后，车辆归属">
          <service-config-dict-value :val="info?.diffSiteReturnCar" dictProp="diffSiteReturnCarMap" />
        </a-descriptions-item>
      </template>
    </a-descriptions>
    <!-- 允许同城异店还车才显示跨城异店还车相关配置 -->
    <template v-if="info.isDiffSiteReturn == 1">
      <a-divider class="divider" />
      <a-descriptions :align="{ label: 'right' }" :column="1">
        <a-descriptions-item label="是否允许跨城异店还车">
          <service-config-dict-value :val="info?.isDiffCityReturn" dictProp="diffCityReturnMap" />
        </a-descriptions-item>
        <template v-if="info.isDiffCityReturn == 1">
          <a-descriptions-item label="跨城异店还车是否收费">
            <service-config-dict-value :val="info?.isDiffCityFee" dictProp="diffCityFeeMap" />
          </a-descriptions-item>
          <a-descriptions-item label="收费规则" v-if="info?.isDiffCityFee == 1">{{
            `每公里收费${getMoney(info.diffCityFee)}元`
          }}</a-descriptions-item>
          <a-descriptions-item label="还车后，车辆归属">
            <service-config-dict-value :val="info?.diffCityReturnCar" dictProp="diffCityReturnCarMap" />
          </a-descriptions-item>
        </template>
      </a-descriptions>
    </template>
    <!-- 是否收取超时费 -->
    <a-divider class="divider" />
    <a-descriptions :align="{ label: 'right' }" :column="1">
      <a-descriptions-item label="是否收取超时费">
        <service-config-dict-value :val="info?.isOverTimeFee" dictProp="diffSiteReturnMap" />
      </a-descriptions-item>
      <a-descriptions-item label="收费规则" v-if="info?.isOverTimeFee">超出时间按零散小时计算</a-descriptions-item>
    </a-descriptions>
    <!-- 是否收取超里程费 -->
    <a-divider class="divider" />
    <a-descriptions :align="{ label: 'right' }" :column="1">
      <a-descriptions-item label="是否收取超里程费">
        <service-config-dict-value :val="info?.isOverMilesFee" dictProp="diffSiteReturnMap" />
      </a-descriptions-item>
      <a-descriptions-item label="收费规则" v-if="info?.isOverMilesFee">
        {{ `每天公里数 ${getVal(info?.limitMiles)} 公里，超出公里按 ${getMoney(info?.milesPrice)} 元/公里` }}
      </a-descriptions-item>
    </a-descriptions>
    <a-divider class="divider" />
    <a-descriptions :align="{ label: 'right' }" :column="1">
      <a-descriptions-item label="是否启用门店取消规则">
        <service-config-dict-value :val="info?.isEnableSiteCancel" dictProp="enableSiteCancelMap" />
      </a-descriptions-item>
      <a-descriptions-item label="门店取消规则" v-if="info?.isEnableSiteCancel">
        {{ `下单后${getVal(info?.cancelUnpaidAutoTime)} 分钟未支付自动取消,支付后${getVal(info?.cancelPaidFreeTime)} 分钟内可免费取消` }}
      </a-descriptions-item>
    </a-descriptions>
    <a-descriptions :align="{ label: 'right' }" :column="0" v-if="info?.isEnableSiteCancel">
      <a-descriptions-item label="取车前是否支持无责取消">
        <service-config-dict-value :val="info?.cancelWeekdayBeforeRule" dictProp="cancelWeekdayBeforeRuleMap" />
      </a-descriptions-item>
      <a-descriptions-item label="取消规则" v-if="!info?.cancelWeekdayBeforeRule">
        <div v-for="(item, index) in info?.cancelWeekdayItemList" :key="index">
          <span>取车前</span>
          <span v-if="item.minHour">{{ `${getVal(item.minHour)}${configType == 'shortSiteConfig' ? '小时' : '天'}至` }}</span>
          <span>{{ `${getVal(item.maxHour)}${configType == 'shortSiteConfig' ? '小时' : '天'}` }}</span>
          <span>{{ `内取消，收取订单总金额的${getVal(item.rate)}%作为违约金` }}</span>
        </div>
      </a-descriptions-item>
    </a-descriptions>
  </div>
</template>

<script setup name="MerchantStoreDetailServiceConfig">
  import serviceConfigDictValue from './service-config-dict-value.vue'
  import { isValid } from '@/utils'
  defineProps({
    info: Object,
    configType: {
      type: String,
    },
  })
  const getMoney = (val) => {
    if (isValid(val)) {
      return val
    } else {
      return '-'
    }
  }
  const getVal = (val) => {
    if (val) {
      return val
    } else {
      return '-'
    }
  }
  const getUnselect = (val) => {
    if (val) return val
    return '未选择'
  }
</script>

<style lang="less" scoped>
  .service-config-wrapper {
    padding-top: 4px;
    :deep(.arco-descriptions-layout-horizontal .arco-descriptions-row .arco-descriptions-item-label) {
      width: 230px;
    }
    :deep(.arco-descriptions-layout-horizontal .arco-descriptions-row .arco-descriptions-item-value) {
      width: unset !important;
    }
  }
  .hide-label {
  }
  .divider {
    margin: 12px 0 20px;
  }
  .info-item {
    margin-left: 24px;
    .info-title {
      color: var(--color-text-3);
      padding-right: 8px;
    }
  }
</style>
